<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>游戏</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./css/game.css">
</head>

<body>
  <header>
    <nav class="navbar navbar-inverse">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <!-- 移动端下的菜单栏按钮，通过data-target找到需要收进菜单栏的内容 -->
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!-- 用于放置logo，如果空间不够，可以通过margin-top负值让logo达到垂直居中 -->
          <a class="navbar-brand" href="#">
            <img src="./assets/images/S-logo.png" alt="logo">
          </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="./index.html">首页</a></li>
            <li><a href="./family.html">Laya家族</a></li>
            <li class="active"><a href="./game.html">游戏</a></li>
            <li><a href="./news.html">新闻动态</a></li>
            <li><a href="#">开发者中心</a></li>
            <li><a href="#">开发者社区</a></li>
            <li><a href="#">开放平台</a></li>
            <li><a href="./about-us.html">关于我们</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <!-- <li><a href="#">Link</a></li> -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">Language <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">中文</a></li>
                <li><a href="#">英文</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </header>
  <section>
    <!-- swiper最大的容器，轮播图内容需要放这个里面，分页器和导航栏按钮一般也会放到这个容器里 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./assets/images/Y-pic01.png" alt="pic01">
        </div>
        <div class="swiper-slide">
          <img src="./assets/images/Y-pic01.png" alt="pic01">
        </div>
        <div class="swiper-slide">
          <img src="./assets/images/Y-pic01.png" alt="pic01">
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <div class="container">
      <div class="redhot">
        <img src="./assets/images/Y-redhot.png" alt="redhot">
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 item-one">
          <img src="./assets/images/Y-pic02.png" alt="pic02">
        </div>
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 item-one">
          <p>猎刃2</p>
          <p>2015年Q版魔幻手游诚心之作，超魔幻ARPG之作!!!无可挑剔的简单操作，无与伦比的爽快打击感，无处不在的惊喜！无穷无尽的回忆！全部技能100%还原，高清华丽特效，体验视觉盛宴；超写实画风，完美重现经典副本；让我们一起来，挑战恶魔，乱斗魔兽！</p>
          <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 picright">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
                <img src="./assets/images/Y-pic03.png" alt="pic03">
                <img src="./assets/images/Y-pic04.png" alt="pic04">
              </div>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 picright">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
                <img src="./assets/images/Y-pic05.png" alt="pic05">
                <img src="./assets/images/Y-pic06.png" alt="pic06">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 item-one item-two">
          <p>上吧主公</p>
          <p>《上吧主公》是一款以三国为背景Q版卡牌游戏，游戏与普通三国题材不同，它以萌萌哒猫咪为三国众名将构筑出别具一
            格的游戏世界观。画面Q萌，技能华丽炫酷，集养成 、 收集 、策略 、卡牌于一体。三国初始群雄争霸，奇妙的名将会帮
            你掌握胜算左右战况。</p>
          <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 picright">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
                <img src="./assets/images/Y-pic07.png" alt="pic07">
                <img src="./assets/images/Y-pic08.png" alt="pic08">
              </div>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 picright">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
                <img src="./assets/images/Y-pic09.png" alt="pic09">
                <img src="./assets/images/Y-pic10.png" alt="pic10">
              </div>
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 item-one">
          <img src="./assets/images/Y-pic11.png" alt="pic11">
        </div>
      </div>
    </div>
    <!-- 更多案例 -->
    <div class="container">
      <div class="more-text">
        <p>更多案例</p>
      </div>
      <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic12.png" alt="pic12">
          </div>
          <p>醉西游</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic13.png" alt="pic13">
          </div>
          <p>魔卡幻想</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic14.png" alt="pic14">
          </div>
          <p>超能战队</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic15.png" alt="pic15">
          </div>
          <p>轰三国</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic16.png" alt="pic16">
          </div>
          <p>刀塔大菠萝</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic17.png" alt="pic17">
          </div>
          <p>迷你猎人</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic18.png" alt="pic18">
          </div>
          <p>萌挂三国</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic19.png" alt="pic19">
          </div>
          <p>战争之门</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic20.png" alt="pic20">
          </div>
          <p>英雄争霸</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic21.png" alt="pic21">
          </div>
          <p>二战传奇</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic22.png" alt="pic22">
          </div>
          <p>龙吟三国</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic23.png" alt="pic23">
          </div>
          <p>哟狐狸精</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic24.png" alt="pic24">
          </div>
          <p>熊来啦</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic25.png" alt="pic25">
          </div>
          <p>我爱我家</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic26.png" alt="pic26">
          </div>
          <p>夺塔三国</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic27.png" alt="pic27">
          </div>
          <p>西游快跑</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic28.png" alt="pic28">
          </div>
          <p>德州扑克</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic29.png" alt="pic29">
          </div>
          <p>神魔快打</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic30.png" alt="pic30">
          </div>
          <p>鬼吹灯</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic31.png" alt="pic31">
          </div>
          <p>挂机三国</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 item-more">
          <div class="more-pic">
            <img src="./assets/images/Y-pic32.png" alt="pic32">
          </div>
          <p>三国仙侠传</p>
        </div>
        
      </div>
    </div>
  </section>
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8">
          <ul class="contact">
            <li><a href="">公司简介</a></li>
            <li><a href="">联系方式</a></li>
            <li><a href="">人才招聘</a></li>
          </ul>
          <p>All Copyright Reserved by Layabox Inc. 京ICP备15008163号-1 </p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
          <ul class="message">
            <li><a href="#"><img src="./assets/images/S-email.png" alt="email"></a></li>
            <li><a href="#"><img src="./assets/images/S-wechat.png" alt="wechat"></a></li>
            <li><a href="#"><img src="./assets/images/S-qq.png" alt="qq"></a></li>
          </ul>
        </div>
      </div>

    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"></script>
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      // direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      autoplay: true,//设置自动播放
      autoplay: {
        //设置自动播放的延迟时间，单位：毫秒
        delay: 1000
      },

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        // type:'progressbar'
        // 点击小圆点控制轮播图
        clickable: true
      },
    })        
  </script>
</body>

</html>